import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';

import 'package:get/get.dart';
import 'package:xiaomi_shop/app/services/screenAdapter.dart';
import 'package:xiaomi_shop/app/widget/logoWidget.dart';

import '../controllers/register_step1_controller.dart';

class RegisterStep1View extends GetView<RegisterStep1Controller> {
  const RegisterStep1View({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('手机号快速注册'),
        centerTitle: true,
      ),
      body: ListView(
        padding: EdgeInsets.all(ScreenAdapter.width(40)),
        children: [
          LogoWidget(),
          SizedBox(
            height: ScreenAdapter.height(80),
          ),
          // 手机号
          Container(
            margin: EdgeInsets.all(ScreenAdapter.width(40)),
            padding: EdgeInsets.all(ScreenAdapter.width(40)),
            height: ScreenAdapter.height(180),
            decoration: BoxDecoration(
                color: Colors.grey.shade200,
                borderRadius: BorderRadius.circular(10)),
            child: TextField(
              controller: controller.textEditingController,
              keyboardType: TextInputType.phone,
              textInputAction: TextInputAction.done,
              textAlignVertical: TextAlignVertical.center,
              maxLength: 11,
              style: TextStyle(
                  fontSize: ScreenAdapter.fontSize(50),
                  fontWeight: FontWeight.bold),
              decoration: InputDecoration(
                hintText: "请输入手机号",
                hintStyle: TextStyle(
                    fontSize: ScreenAdapter.fontSize(50),
                    fontWeight: FontWeight.normal),
                counterText: "",
                border: OutlineInputBorder(
                    borderSide: BorderSide.none,
                    borderRadius: BorderRadius.circular(70)),
                // 可解决 TextField 文字不居中问题
                contentPadding: EdgeInsets.symmetric(horizontal: 14.w),
              ),
            ),
          ),
          // 下一步
          Container(
            margin: EdgeInsets.only(
                top: ScreenAdapter.height(20),
                left: ScreenAdapter.height(80),
                right: ScreenAdapter.height(80)),
            height: ScreenAdapter.height(136),
            child: ElevatedButton(
                style: ButtonStyle(
                    backgroundColor: MaterialStatePropertyAll(Colors.red),
                    foregroundColor: MaterialStatePropertyAll(Colors.white),
                    textStyle: MaterialStatePropertyAll(TextStyle(
                        fontSize: ScreenAdapter.fontSize(40),
                        fontWeight: FontWeight.bold))),
                onPressed: () async {
                  if (GetUtils.isPhoneNumber(
                          controller.textEditingController.text) &&
                      controller.textEditingController.text.length == 11) {
                    // 发送验证码
                    bool result = await controller.sendCode();
                    if (result) {
                      print("下一步");
                      Get.offAndToNamed("/register-step2", arguments: {
                        "tel": controller.textEditingController.text
                      });
                    } else {
                      Get.snackbar("提示信息", "验证码发送失败");
                    }
                  } else {
                    Get.snackbar("提示信息", "手机号码格式错误");
                  }
                },
                child: const Text("下一步")),
          ),
          // 其他操作
          Container(
              margin: EdgeInsets.only(top: ScreenAdapter.height(30)),
              alignment: Alignment.center,
              child: Text.rich(TextSpan(
                  text: "遇到问题？您可以",
                  style: TextStyle(color: Colors.black26),
                  children: [
                    TextSpan(
                        text: "获取帮助",
                        style: TextStyle(color: Colors.blue.shade900),
                        recognizer: TapGestureRecognizer()
                          ..onTap = () {
                            print("获取帮助");
                          })
                  ])))
        ],
      ),
    );
  }
}
